<template>
	<navigatorComp
		:title="isEdit ? '基本信息' : '创建家族祠堂'"
		bgcColor="#121512"
		fontColor="#fff"
	></navigatorComp>

	<scroll-view
		scroll-y="true"
		:style="{
			height: height + 'px',
			paddingTop: '32rpx',
			boxSizing: 'border-box'
		}"
	>
		<view class="createTemple_inputBox">
			<image class="createTemple_image" :src="imgUrl + 'imgs/home/temple_img.png'"></image>
			<!-- <view class="uploadText" @click="uploadDeadee">上传祠堂图片</view> -->

			<u-form label-width="100" :label-style="obj" :model="formData" ref="uForm">
				<u-form-item label="祠堂名字:" prop="hallName" required>
					<u-input
						v-model.trim="formData.hallName"
						border="none"
						placeholder="如张氏祠堂"
						clearable
						maxlength="10"
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="堂号牌匾:" prop="hallHao" required>
					<u-input
						v-model="formData.hallHao"
						border="none"
						placeholder="请输入"
						clearable
						maxlength="4"
						inputAlign="right"
						fontSize="28rpx"
						color="#fff"
					/>
				</u-form-item>
				<u-form-item label="祠堂祖籍:" prop="homeAddr" required>
					<pickerAddress @change="changeAddress">
						<view class="display_flex">
							<view :class="['placeHolder', formData.homeAddr && 'value']">
								{{ formData.homeAddr || '请选择' }}
							</view>
							<image
								class="arrow_right"
								:src="imgUrl + 'imgs/home/arrow_right.png'"
								mode=""
							></image>
						</view>
					</pickerAddress>
				</u-form-item>
				<!-- <u-form-item label="牌位主题:" prop="theme" required>
					<u-input
						maxlength="6"
						v-model="formData.subject"
						border="none"
						placeholder="请输入"
						clearable
					/>
				</u-form-item> -->
				<u-form-item
					label="祠记:"
					prop="summarized"
					labelPosition="top"
					labelWidth="300rpx"
					required
				>
					<view class="createTemple_inputBox_intro">
						<up-textarea
							disableDefaultPadding
							placeholderClass="placeholderClass"
							v-model.trim="formData.summarized"
							placeholder="请输入祠堂介绍"
							height="270rpx"
							border="none"
							maxlength="200"
							count
						></up-textarea>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="display_flex createTemple_inputBox_tip">
			<!-- <up-checkbox
				:customStyle="{ marginBottom: '8px' }"
				label="我承诺内容真实有效，愿意承担法律责任"
				:name="1"
				shape="circle"
				labelSize="24rpx"
				labelColor="#999999"
				activeColor="#7cd172"
				usedAlone
				size="30rpx"
				v-model:checked="formData.isAgreement"
			></up-checkbox> -->
			<image :src="imgUrl + 'imgs/home/temple_att.png'" mode="aspectFill"></image>
			<view>
				平台声明：您在使用本平台服务时所提交的所有信息必须真实有效。您需对此承担完全的法律责任，感谢您的配合与支持。
			</view>
		</view>
		<view style="width: 100%; height: 32rpx"></view>
		<footerBtn
			bgcColor="#121512"
			:btnDisable="btnDisable"
			:name="
				isEdit
					? '保存'
					: coinNumber
					? coinNumber > myYbNumber
						? '福币不足，去充值'
						: `${coinNumber}福币创建祠堂`
					: '免费创建祠堂'
			"
			@clickBtn="SUBMIT"
		>
			<!-- 新增-->
			<view v-if="!isEdit" style="width: 40rpx; height: 40rpx;margin-right: 10rpx;">
				<!-- 免费创建 -->
				<image
					v-if="!coinNumber"
					style="width: 40rpx; height: 40rpx;"
					:src="imgUrl + 'imgs/home/add_memory.png'"
					mode=""
				></image>
				<!-- 付费创建，余额充足 -->
				<image
					v-if="coinNumber"
					style="width: 40rpx; height: 40rpx;"
					:src="imgUrl + 'imgs/home/coin.png'"
					mode=""
				></image>
			</view>
		</footerBtn>
	</scroll-view>
</template>

<script setup>
import { watchEffect, computed, onMounted, ref, reactive, nextTick, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { imgUrl } from '@/external/utils/imgUrl';
import navigatorComp from '/components/navigator/index.vue';
import pickerAddress from '/components/picker/addressPicker.vue';
import footerBtn from '/components/footerBtn/index.vue';
import HomeApi from '@/API/home/index.js';
import CommonApi from '@/API/commenApi';
import store from '@/store/index.js';
import form from 'uview-ui/libs/config/props/form';
import _ from 'lodash';
const homeApi = new HomeApi();
const commonApi = new CommonApi();

const $chooseImg = getCurrentInstance().appContext.config.globalProperties.$chooseImg;
const obj = reactive({
	'font-size': '28rpx',
	color: '#FFFFFF'
});
const btnDisable = ref(true);
const isAgreement = ref(false);
const address = ref();
const height = ref(0);
const isEdit = ref(false);
const formData = ref({
	hallName: '',
	hallHao: '',
	summarized: '',
	homeAddr: '',
	hallId: '0' //如果是创建就为0
});
const coinNumber = ref(0); //福币支付数量
const myYbNumber = ref(0); //我的福币余额

onMounted(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});

onLoad((options) => {
	isEdit.value = options.isEdit == 1 ? true : false;

	if (uni.getStorageSync('hallId')) {
		// 编辑
		query();
	} else {
		// 创建
		// 是否免费创建
		getIsPay();
	}
});

onShow(() => {
	// 获取个人的福币信息
	getUserInfo();
});

/**
 * 是否免费创建
 */
const getIsPay = async () => {
	let res = await commonApi.getConsumeList({ pos: 2 });
	if (res.code === 0) {
		coinNumber.value = res.data.items[0].number;
	}
};

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	await store.dispatch('setUserInfo');
	myYbNumber.value = store.state.userInfo.userInfo.ybCoinNumber;
};

const query = () => {
	if (uni.getStorageSync('hallId')) {
		homeApi
			.getHallBaseInfoApi({
				hallId: uni.getStorageSync('hallId')
			})
			.then((res) => {
				formData.value.hallName = res.data.hallName;
				formData.value.hallHao = res.data.hallHao;
				formData.value.homeAddr = res.data.homeAddr;
				formData.value.subject = res.data.subject;
				formData.value.summarized = res.data.summarized;
				formData.value.hallImage = res.data.hallImage;
				formData.value.hallId = res.data.hallId;
			})
			.catch(() => {});
	}
};
/**
 * 点击上传遗像
 */
const uploadDeadee = () => {
	$chooseImg
		.chooseImg({
			formData: {
				fileType: 'image',
				fileDirType: 'hall'
			},
			countLimit: 1
		})
		.then((res) => {
			formData.value.hallImage = JSON.parse(res[0].img_url.data).fileUrl;
		});
};

/**
 * 校验数据
 */
const validate = () => {
	if (formData.value.hallName == '') {
		uni.showToast({
			title: '请输入祠堂名称',
			icon: 'none'
		});
		return false;
	} else if (formData.value.hallName.length < 4) {
		uni.showToast({
			title: '祠堂名字应输入4-10个字符',
			icon: 'none'
		});
		return false;
	} else if (formData.value.hallHao == '') {
		uni.showToast({
			title: '请输入堂号牌匾',
			icon: 'none'
		});
		return false;
	} else if (!formData.value.homeAddr) {
		uni.showToast({
			title: '请输入祠堂祖籍',
			icon: 'none'
		});
		return false;
	} else if (!formData.value.summarized) {
		uni.showToast({
			title: '请输入祠记',
			icon: 'none'
		});
		return false;
	}
	return true;
};
const SUBMIT = _.debounce(() => {
	createTemple();
}, 500);
const createTemple = () => {
	//福币余额不足，去充值
	if (myYbNumber.value < coinNumber.value) {
		goUrl('/subPages/mine/cloudCoin/recharge');
		return;
	}

	if (!validate()) {
		return;
	}
	homeApi
		.createHallApi(formData.value)
		.then((res) => {
			uni.showToast({
				title: '创建成功'
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1000);
		})
		.catch(() => {});
};
const changeAddress = (e) => {
	if (e.data) {
		formData.value.homeAddr = e.data.join('');
		console.log(formData.value.homeAddr);
	}
};
watchEffect(() => {
	if (
		formData.value.hallHao &&
		formData.value.hallName &&
		formData.value.summarized &&
		formData.value.homeAddr
	) {
		btnDisable.value = false;
	} else {
		btnDisable.value = true;
	}
});

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.createTemple_inputBox {
	margin: 0 32rpx;
	background: linear-gradient(225deg, rgba(41, 43, 42, 0.3) 0%, rgba(138, 145, 142, 0.3) 100%);
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 32rpx 0 40rpx;
	box-sizing: border-box;

	.createTemple_image {
		width: 132rpx;
		height: 176rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
	}

	.uploadText {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-bottom: 48rpx;
	}

	.createTemple_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .u-form {
		width: 100%;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	::v-deep .input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999 !important;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}
}

.createTemple_inputBox_intro {
	width: 100%;
	margin-top: 24rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 32rpx 50rpx 32rpx !important;
		box-sizing: border-box !important;
		height: 400rpx !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		bottom: 16rpx !important;
		right: 16rpx !important;
		font-size: 26rpx !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}
}

.createTemple_inputBox_tip {
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	margin: 24rpx 64rpx 0 32rpx;
	display: flex;
	align-items: center;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
